import React, { Component } from 'react'
import PubSubJS from 'pubsub-js'
import axios from 'axios'
import './index.css'

export default class Search extends Component {
    myInp = React.createRef()

    search = () => {
        const {value} = this.myInp.current
        // 使用PubSubJS上的publish方法进行消息的发布
        PubSubJS.publish('giveData', {isFirst: false, isLoading: true})
        
        axios.get(`/api1/search/users2?q=${value}`).then(
            res => {
                console.log(res.data.items);
                PubSubJS.publish('giveData', {isFirst: false, userInfo: res.data.items, isLoading: false})
            },
            err => {
                PubSubJS.publish('giveData', {isFirst: false, err: err.message, isLoading: false})
            }
        )
    }

    render() {
        return (
            <div className="searchContainer">
                <h1>Search Github Users</h1>
                <input ref={this.myInp} type="text" placeholder="enter the name you search"/>
                <button onClick={this.search}>Search</button>
            </div>
        )
    }
}
